<template>
	<view>
		<BgLinear />
		<BackBar :title="title" />
		<view class="box-theme-column">
			<view class="box-gird">
				<!--  		:class="is_small == 'no' ? 'box-image' : 'box-image-small'"-->
				<view
					:class="is_small == 'no' ? 'grid-item' : 'grid-item-samll'"
					@click="fullScreenPreviewImage(item.id, index)"
					v-for="(item, index) in arr_image.value"
					:key="item.id"
				>
					<ImageLoading :src="item.url"></ImageLoading>
				</view>
			</view>
		</view>

		<Barload :status="barload_status" />

		<FixedFun />
	</view>
</template>

<!-- 需路由传递category -->
<script setup>
import { reactive, ref, computed } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { get_image_data_by_category, get_category_desc } from '../../api'
import { onPageScroll } from '@dcloudio/uni-app'

// 给FixedFun
onPageScroll(() => {})

const arr_image = reactive({ value: [] })
const page = ref(1)
const barload_status = ref('loading')

const category = ref(null)
const title = ref('')
const total = ref(null)
const is_small = ref('no')

let limit = 12

onLoad((obj) => {
	obj.category = Number(obj.category)

	// [14, 15]由后端给
	if ([14, 15].includes(obj.category)) {
		is_small.value = 'yes'
		limit = 21
	}

	category.value = obj.category

	api_get_image_data_by_category()
	api_get_category_desc(obj.category)
})

// 触底
onReachBottom(async () => {
	page.value++
	api_get_image_data_by_category(true)
})

const api_get_category_desc = async function (category) {
	const res = await get_category_desc(category)
	title.value = res.title
	total.value = res.total
}

const api_get_image_data_by_category = async function (is_push = false) {
	if (barload_status.value == 'no-more') return

	let res = await get_image_data_by_category(page.value, limit, category.value)

	if (res.data.length < limit) barload_status.value = 'no-more'

	if (is_push) {
		arr_image.value = [...arr_image.value, ...res.data]
	} else {
		arr_image.value = res.data
	}
}

const fullScreenPreviewImage = function (id, index) {
	let arg = '?id=' + id
	arg += '&index=' + index
	arg += '&total=' + total.value
	arg += '&is_small=' + is_small.value

	uni.navigateTo({
		url: '/pages/fullScreenPreviewImage/fullScreenPreviewImage' + arg
	})
}
</script>

<style scoped lang="scss">
.box-theme-column {
	margin: 0 $my-margin-rpx;
	position: relative;
	z-index: 1;

	.box-gird {
		display: grid;
		grid-template-columns: repeat(3, 228rpx);
		place-content: space-around space-evenly;
		grid-gap: 10rpx;
		.grid-item {
			height: 500rpx;
		}
		.grid-item-samll {
			height: 228rpx;
		}
		// .box-image-small {
		// 	height: 225rpx !important;
		// }
		// .box-image {
		// 	height: 500rpx !important;
		// }
	}
}
</style>
